<!--
  -    Copyright (c) 2018-2025, hycloud All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: hycloud
  -->
<template>
    <div class="execution">
        <basic-container>
            <avue-crud ref="crud"
                        v-model="form"
                       :page.sync="page"
                       :data="tableData"
                       :permission="permissionList"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       @on-load="getList"
                       @search-change="searchChange"
                       @refresh-change="refreshChange"
                       @size-change="sizeChange"
                       @current-change="currentChange"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @row-del="rowDel"
                       :before-open="beforeOpen">
                        <template slot="attachment"  slot-scope="scope" v-if="(JSON.parse(scope.row.attachment) instanceof Array)">
                            <div v-for="(item,index) in JSON.parse(scope.row.attachment)" :key="index" class="underline-block">
                                <a :href="item.url" :download="item.original">{{item.original}}</a>
                            </div>
                        </template>
                       <template slot-scope="{ row }" slot="menu">
                            <el-button
                            v-if="row.reported === '0'"
                            icon="el-icon-position"
                            type="text"
                            @click="deviceshow(row)"
                            >上报</el-button
                            >
                            <el-button
                            icon="el-icon-position"
                            type="text"
                            @click="deviceshow(row, 'view')"
                            >查看</el-button
                            >
                        </template>
            </avue-crud>
        </basic-container>
        <el-dialog top="5vh" :title="title1" v-if="modal" :visible.sync="modal" append-to-body>
        <avue-form
          ref="wcnjform"
          class="avue--detail"
          :option="wcnjoption"
          v-model="wcnjform"
          @submit="toaudit"
        >
          <template slot-scope="scope" slot="menuForm">
            <el-button icon="el-icon-close" @click="modal = false"
              >取消</el-button
            >
          </template>
          <template slot-scope="scope" slot="recordItemList">
            <div class="prdiv">
                <div>巡检项目:</div>
                <avue-crud
                  class="no-menu"
                  ref="conscurd"
                  :option="itemOption"
                  :data="itemList || []"
                >
                    <template slot-scope="scope" slot="result">
                        <el-input maxlength="68" :disabled="flag === 'view'" v-model="scope.row.result" placeholder="请输入内容"></el-input>
                    </template>
                </avue-crud>
              </div>
          </template>
        </avue-form>
        </el-dialog>
    </div>
</template>

<script>
    import {fetchList, getObj, addObj, putObj, delObj, reported} from '@/api/patrol/patrolrecord'
    import {tableOption, wcnjoption} from '@/const/crud/patrol/patrolrecord'
    import {tableOption as itemOption} from '@/const/crud/patrol/patrolrecorditem'
    import {mapGetters} from 'vuex'

    export default {
        name: 'patrolrecord',
        data() {
            return {
                modal:false,
                form: {},
                title1: '',
                itemList: [],
                flag: '',
                itemOption: itemOption,
                wcnjoption: wcnjoption,
                wcnjform: {},
                searchForm: {},
                tableData: [],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 20 // 每页显示多少条
                },
                tableLoading: false,
                tableOption: tableOption
            }
        },
        computed: {
            ...mapGetters(['permissions']),
            permissionList() {
                return {
                    addBtn: false,
                    delBtn: false,
                    editBtn: false
                };
            }
        },
        methods: {
            beforeOpen(show, type, a) {
                let self = this
                if (type == "view") {
                    self.form.attachment = JSON.parse(self.form.attachment)
                }
                show();
            },
            deviceshow(row, type) {
                let filed_att = this.findObject(this.wcnjoption.column,'attachment')
                let filed_remark = this.findObject(this.wcnjoption.column,'remark')
                getObj(row.recordId).then(response => {
                    this.wcnjform = response.data.data
                    if (type === 'view') {
                        this.flag = 'view'
                        this.title1 = '查看'
                        filed_att.disabled = true
                        filed_remark.disabled = true
                        this.wcnjoption.submitBtn = false
                        this.wcnjform.attachment = JSON.parse(response.data.data.attachment)
                    } else {
                        this.title1 = '上报'
                        this.flag = ''
                        filed_att.disabled = false
                        filed_remark.disabled = false
                        this.wcnjoption.submitBtn = true
                    }
                    this.itemList = response.data.data.recordItemList
                    this.modal = true
                })
            },
            toaudit(form, done) {
                form.recordItemList = this.itemList
                let flag = true
                this.itemList.map(item => {
                    if (item.required === '1' && !item.result && flag) {
                        this.$message.error("请填写必填项")
                        flag = false
                        done()
                    }
                })
                if (flag) {
                    let att = Object.assign({}, form)
                    let attachment = "";
                    try {
                        attachment = JSON.stringify(att.attachment);
                    } catch (error) {
                        throw new Error(error);
                    }
                    att.attachment = attachment
                    reported(att).then(response => {
                        this.$message.success("提交成功")
                        this.modal = false
                        this.getList(this.page)
                    }).catch(() => {
                        done()
                    })
                }
            },
            getList(page, params) {
                this.tableLoading = true
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params, this.searchForm )).then(response => {
                    this.tableData = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                }).catch(() => {
                    this.tableLoading=false
                })
            },
            rowDel: function (row, index) {
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delObj(row.recordId)
                }).then(data => {
                    this.$message.success('删除成功')
                    this.getList(this.page)
                })
            },
            handleUpdate: function (row, index, done,loading) {
                putObj(row).then(data => {
                    this.$message.success('修改成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            handleSave: function (row, done,loading) {
                addObj(row).then(data => {
                    this.$message.success('添加成功')
                    done()
                    this.getList(this.page)
                }).catch(() => {
                    loading();
                });
            },
            sizeChange(pageSize){
                this.page.pageSize = pageSize
            },
            currentChange(current){
                this.page.currentPage = current
            },
            searchChange(form, done) {
                this.searchForm = form
                this.page.currentPage = 1
                this.getList(this.page, form)
                done()
            },
            refreshChange() {
                this.getList(this.page)
            }
        }
    }
</script>
<style lang="scss">
.no-menu{
    .avue-crud__menu{
        height: 0;
        min-height: 0;
    }
    .el-input__inner{
        border: 1px solid #DCDFE6;
    }
}
</style>